<template>
  <div style="padding:0 20px">
    <div class="translate-input-middle" style="height: 60px;">
      <el-popover placement="bottom-start" width="400" trigger="click">
        <template #reference>
          <div class="select-language">
            <span size="small" type="text">中文简体</span>
            <el-icon>
              <CaretBottom />
            </el-icon>
          </div>
        </template>
      </el-popover>
      <div class="t-icon">
        <el-icon>
          <Right />
        </el-icon>
      </div>
      <el-popover placement="bottom-start" width="400" trigger="click">
        <template #reference>
          <div class="select-language">
            <span size="small" type="text">英语</span>
            <el-icon>
              <CaretBottom />
            </el-icon>
          </div>
        </template>
      </el-popover>
      <el-popover placement="bottom-start" width="400" trigger="click">
        <template #reference>
          <div class="select-language" style="margin-left: 30px;">
            <span size="small" type="text">通用领域</span>
            <el-icon>
              <CaretBottom />
            </el-icon>
          </div>
        </template>
      </el-popover>
      <div class="t-icon">

        <el-popover ref="popover" placement="right" :width="200" trigger="click"
         >
          <template #reference>
            <el-icon>
              <Setting />
            </el-icon>
          </template>
          <div style="font-size: 12px;">
            <div style="color:#333;font-weight: bold;">启用/关闭知识库</div>
            <div style="margin-top: 10px;">使用术语库&nbsp;&nbsp;<el-switch size="small" v-model="value1" />&nbsp;<el-button @click=" router.push({ name: 'create-libs', query: { type: 'term-libs' } })" type="text" size="small">去配置</el-button></div>
            <div>使用记忆库&nbsp;&nbsp;<el-switch size="small" v-model="value12" />&nbsp;<el-button @click="  router.push({ name: 'create-libs', query: { type: 'memory-libs' } })" type="text" size="small">去配置</el-button></div>
          </div>


        </el-popover>
      </div>

      <div class="t-icon">
        <el-button type="primary" size="small">翻译</el-button>
      </div>
    </div>
    <div class="t-content">
      <div class="t-left">
        <el-input type="textarea" v-model="words" class="custom-input" :rows="12" placeholder="请输入要翻译的文字" resize="none"
          maxlength="5000" show-word-limit></el-input>
      </div>
      <div class="t-right">{{ words }}
        <div class="t-copy"><el-icon>
            <DocumentCopy />
          </el-icon></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Right, CaretBottom, DocumentCopy, Setting } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
let router = useRouter()
const words = ref('');
const value1= ref('');
const value12= ref('');

</script>

<style scoped lang="scss">
.translate-input-middle {
  display: flex;
  align-items: center;

  // border-bottom: 1px solid #e0e0e0;
  padding-left: 20px;

  .t-icon {
    margin: 0 20px;
  }
}

.select-language {
  font-size: 14px;
  color: #666;
  cursor: pointer;

  span {
    margin-right: 20px;
  }
}

.custom-input {
  // border: 1px solid #000;
}

:deep .el-textarea__inner {
  box-shadow: 0 0 0 0px #fff inset;
  // border: 1px solid #f00;
}

.t-content {
  min-height: 300px;
  margin-top: 0px;
  display: flex;

  .t-left {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
  }

  .t-right {
    flex: 1;
    position: relative;
    padding: 10px;
    border: 1px solid #ddd;
    border-left: transparent;
    height: 100%;
    min-height: 300px;
    border-radius: 3px;

    .t-copy {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
  }
}
</style>